<script setup lang="ts">
import YInfo from './components/YInfo.vue';
import YIcon from '@/components/YIcon.vue';
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/user';
import { router } from '@/router';

const showTeacher = ref(false);

onMounted(() => {
    checkRole();
})

const checkRole = () => {
    const userStore = useUserStore();
    let userRoleCode = userStore.getRoleCode;
    if (userRoleCode == 'TEACHER') {
        showTeacher.value = true;
    }else{
        showTeacher.value = false;
    }
}

const toJoinClassroom = () => {
    router.push({
        name: 'joinClassroom'
    })
}

const toCreateClassroom = () => {
    router.push({
        name: 'createClassroom'
    })
}

const toCreateQuestion = () => {
    router.push({
        name: 'createQuestion'
    })
}
</script>

<template>
    <div class="container">
        <YInfo></YInfo>
        <div class="row">
            <YIcon class="icon" name="tiezi" :size="50" text="帖子"></YIcon>
            <YIcon class="icon" name="pinglun" :size="50" text="评论"></YIcon>
            <YIcon class="icon" name="shoucangjia" :size="50" text="收藏"></YIcon>
            <YIcon class="icon" name="zanguo" :size="50" text="赞过"></YIcon>
        </div>
        <div class="row" v-if="showTeacher">
            <!-- <YIcon class="icon" name="ketangxueyuan" :size="50" text="学生管理"></YIcon> -->
            <!-- <YIcon class="icon" name="pinqingwaipinjiaoshi" :size="50" text="教师管理"></YIcon> -->
            <YIcon class="icon" name="yuanxiaoduibi" :size="50" text="创建课堂" @click="toCreateClassroom"></YIcon>
            <YIcon class="icon" name="luqufenshubiao" :size="50" text="一键出题" @click="toCreateQuestion"></YIcon>
        </div>
        <div class="row" v-else>
            <!-- <YIcon class="icon" name="ketangxueyuan" :size="50" text="学生管理"></YIcon> -->
            <!-- <YIcon class="icon" name="pinqingwaipinjiaoshi" :size="50" text="教师管理"></YIcon> -->
            <YIcon class="icon" name="zhuanyetisheng" :size="50" text="加入课堂" @click="toJoinClassroom"></YIcon>
            <!-- <YIcon class="icon" name="chuti" :size="50" text="一键出题"></YIcon> -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    .row {
		height: 10%;
        display: flex;
        background-color: white;
        margin: 3%;
        border-radius: 10px;
        .icon {
            width: 100%;
        }
    }
}
</style>